 <template>
  <div>
    <!-- 报名人员 -->
    <tTable :columns="columns" :data="tableData">
      <!-- 操作 -->
      <template v-slot:percentage="slotProps">
        <div>{{slotProps.scope.row.percentage * 100}}%</div>
      </template>
      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button @click="checkDetail(slotProps.scope.$index)" size="small">明细</el-button>
        <el-button @click="confirm(slotProps.scope.$index)" class="add-style" type="primary" size="small">签订</el-button>
        <el-button @click="reject(slotProps.scope.$index)" type="danger" size="small">拒绝</el-button>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>

    <div v-if="tableData.length !== 0">
      <el-dialog
        :title="'邀约公司：' + tableData[checkIndex].conApplyerName"
        :visible.sync="dialogVisible"
        width="60%"
      >
        <div>
          <div>签约课程：{{tableData[checkIndex].courseName}}</div>
          <div>邀请时间：{{tableData[checkIndex].date}}</div>
          <div>基础提成比例：{{tableData[checkIndex].percentage * 100}}%</div>
        </div>
        <hr>
        <div>
          <div>邀约公司联系人：{{tableData[checkIndex].contactsName || "无"}}</div>
          <div>移动电话：{{tableData[checkIndex].contactsPhone || "无"}}</div>
          <div>座机：{{tableData[checkIndex].contactsCellPhone || "无"}}</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="add-style" type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getConfirmOrgId, handleContract } from "api/getData";
import { setTimeout } from "timers";
import Pagination from "src/components/pagination";
import { formatDateTime } from "src/util/time.js";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      checkIndex: 0,

      total: -1,
      
      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "courseName", label: "签约课程", width: "120" }
        },
        {
          attr: { prop: "conApplyerName", label: "合同甲方" }
        },
        {
          attr: { prop: "conConfirmerName", label: "合同乙方" }
        },
        {
          slot: "percentage",
          attr: { prop: "percentage", label: "基础提成比例", width: "110" }
        },
        {
          attr: { prop: "createTime", label: "发起时间", width: "180" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "240" }
        }
      ]
    };
  },
  components: { Pagination, tTable },
  mounted() {
    this.getData(1);
  },
  methods: {
    checkDetail: function(index) {
      this.checkIndex = index;
      this.dialogVisible = true;
    },
    reject: function(index) {
      handleContract(this.tableData[index].id, "REJECTED").then(res => {
        this.$message.success("拒绝成功");
        this.getData(1);
      });
    },
    confirm: function(index) {
      handleContract(this.tableData[index].id, "CONFIRM").then(res => {
        this.$message.success("签署成功");
        this.getData(1);
      });
    },
    getData: function(pageNumber) {
      getConfirmOrgId("PENDING", pageNumber).then(res => {
        this.tableData = res.content.map(item => {
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
        this.total = res.totalElements;
      });
    },
    handleChange(pageNumber) {
      this.getData(pageNumber);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
</style>
